d3plus-react

d3plus-react

React components for d3plus visualizations.

Installing

Use npm install d3plus-react -S to install the package as a dependency. And then use the components in your React project like this:

import {Treemap} from "d3plus-react";

const methods = {
  groupBy: "id",
  data: [
    {id: "alpha", value: 29},
    {id: "beta",  value: 10}
  ],
  size: d => d.value
};

<Treemap config={methods} />

Additionally, a file named .d3plus.js needs to exist in the root path of your project. This file should contain all global styles to be applied to the visualizations (passed to the .config( ) method). Here is an example that makes all of your visualizations use the best font ever created:

export default {
  shapeConfig: {
    fontFamily: "Comic Sans MS"
  }
};

Update Cycle

In order to detect whether a component should udpate in React, each component does a rudimentary check between the current config object and the incoming new config object. This is done via a simple equality check on the stringified versions of each object. This can also be overridded using the forceUpdate prop:

const shouldUpdate = this.props.forceUpdate ? false : JSON.stringify(oldConfig) === JSON.stringify(newConfig);

This works in most cases, but may not update your visualizations if using an accessor function that references an external variable. For example, if your x accessor is:

const config = {
  ...,
  x: d => d[xVar]
};

...and xVar changes, the visualization will not update. The quick "hack" for this is add xVar to the config object so that it triggers the update via stringify:

const config = {
  ...,
  x: d => d[xVar],
  xVar
};

API Reference

• AreaPlot
• BarChart
• BumpChart
• Donut
• Geomap
• LinePlot
• Matrix
• Network
• Pack
• Pie
• Plot
• Priestley
• Radar
• RadialMatrix
• Rings
• Sankey
• StackedArea
• Tree
• Treemap
• Viz

---

AreaPlot <>

This is a global class, and extends all of the methods and functionality of Viz.

---

BarChart <>

This is a global class, and extends all of the methods and functionality of Viz.

---

BumpChart <>

This is a global class, and extends all of the methods and functionality of Viz.

---

Donut <>

This is a global class, and extends all of the methods and functionality of Viz.

---

Geomap <>

This is a global class, and extends all of the methods and functionality of Viz.

---

LinePlot <>

This is a global class, and extends all of the methods and functionality of Viz.

---

Matrix <>

This is a global class, and extends all of the methods and functionality of Viz.

---

Network <>

This is a global class, and extends all of the methods and functionality of Viz.

---

Pack <>

This is a global class, and extends all of the methods and functionality of Viz.

---

Pie <>

This is a global class, and extends all of the methods and functionality of Viz.

---

Plot <>

This is a global class, and extends all of the methods and functionality of Viz.

---

Priestley <>

This is a global class, and extends all of the methods and functionality of Viz.

---

Radar <>

This is a global class, and extends all of the methods and functionality of Viz.

---

RadialMatrix <>

This is a global class, and extends all of the methods and functionality of Viz.

---

Rings <>

This is a global class, and extends all of the methods and functionality of Viz.

---

Sankey <>

This is a global class, and extends all of the methods and functionality of Viz.

---

StackedArea <>

This is a global class, and extends all of the methods and functionality of Viz.

---

Tree <>

This is a global class, and extends all of the methods and functionality of Viz.

---

Treemap <>

This is a global class, and extends all of the methods and functionality of Viz.

---

Viz <>

This is a global class, and extends all of the methods and functionality of React.Component.

• Viz ⇐ React.Component
  • new Viz()
  • .module.exports

# new Viz()

Creates SVG paths and coordinate points based on an array of data. See this example for help getting started using the geomap generator.

# Viz.module.exports <>

This is a static property of Viz.

Param	Type	Default	Description
[config]	Object	{}	An object containing method/value pairs to be passed to the visualization's .config( ) method.
[dataFormat]	function	d3plus.dataFold	A custom formatting function to be used when formatting data from an AJAX request. The function will be passed the raw data returned from the request, and is expected to return an array of values used for the data method.
[linksFormat]	function	d3plus.links(path, formatter)	A custom formatting function to be used when formatting links from an AJAX request. The function will be passed the raw data returned from the request, and is expected to return an array of values used for the links method.
[nodesFormat]	function	d3plus.nodes(path, formatter)	A custom formatting function to be used when formatting nodes from an AJAX request. The function will be passed the raw data returned from the request, and is expected to return an array of values used for the nodes method.
[topojsonFormat]	function	d3plus.topojson(path, formatter)	A custom formatting function to be used when formatting topojson from an AJAX request. The function will be passed the raw data returned from the request, and is expected to return an array of values used for the topojson method.

---

_{Documentation generated on Fri, 20 Nov 2020 15:51:53 GMT}